<template>
	<view class="floor">
		<view class="floorTitles">
			{{sectionName}}
		</view>
		<view class="floorList">
			<view @click="todetail(item)" class="floorItem" v-for="(item,index) in elementDtoList" :key="item.id">
				<image class="floorItemImg" :src="item.photoUrl" mode=""></image>
				<view class="floorItemRecommend">{{item.name}}</view>
				<view class="price">￥{{item.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["sectionImg"],
		data(){
			return{
				
			}
		},
		methods:{
			todetail(item){
				const itemdetail = [item.yktCourseCardv,item.photoUrl]
				wx.navigateTo({
					url:"/pages/detail/detail",
					success:(res)=>{
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: itemdetail })
					}
				})
			}
		},
		computed:{
			elementDtoList(){
				return this.sectionImg.elementDtoList
			},
			sectionIndex(){
				return this.sectionImg.sectionIndex
			},
			sectionName(){
				return this.sectionImg.sectionName
			}
		}
	}
</script>

<style lang="stylus">
	.floor
		height 1100rpx
		background-color #FFFFFF
		padding 30rpx
		margin-bottom 40rpx
		.floorTitles
			font-weight 600
			margin-bottom 30rpx
			height 42rpx
		.floorList
			display flex
			flex-wrap wrap
			.floorItem:first-child
				width 100%
				padding 10rpx
				box-sizing border-box
				.floorItemImg
					width 100%
					height 300rpx
				.floorItemRecommend	
					margin-top 15rpx
					font-size 28rpx
					white-space nowrap
					text-overflow ellipsis
					overflow hidden
				.price
					color red
					font-size 28rpx
					height 30rpx
						
			.floorItem
				box-sizing border-box
				width 50%
				padding 10rpx
				.floorItemImg
					width 100%
					height 190rpx
				.floorItemRecommend
					margin-top 15rpx
					font-size 28rpx
					white-space nowrap
					text-overflow ellipsis
					overflow hidden
				.price
					color red
					font-size 28rpx
					height 30rpx	
</style>
